《高性能网站建设指南》阅读笔记_规则6- 将脚本放在底部
发布时间:2013-11-22 浏览:292打印字号:大中小
将样式表放在顶部这一点我想应该没有人反对的了,但将脚本放在底部这一点我想很多网站都习惯直接放在样式下面,我们的taoche也是一样。
如果对于小网站来说这样并无所谓,但对于每天几十万流量的大网站来说,这就影响大了,就像蝴蝶效应。
我们找个例子:
打开易车网的首页,查看源代码,我们会发现除了一个基本JS外,其他的脚本都是放在最底部,我又看了下汽车之家的选车也是,发现除了少量几个控制样式的js放在顶部,其他的也都放在了尾部。
前面提到对响应时间影响的是页面中组件的数量。当缓存为空时,每个组件都会产生一个HTTP请求,有时即便缓存是完整的亦是如此。要知道浏览器会并行的执行HTTP请求,大家可能会问,为什么HTTP请求的数量会影响响应时间呢?浏览器不能一次将它们都下载下来吗?对此的解释要回到HTTP1.1规范 (我找了一个中文版的给大家),该规范建议浏览器从每一个主机名并行地下载两个组件。关于浏览器的并行下载数:浏览器的并行下载进程数(firefox默认最多为6个,IE8据说最多为8个,opera 9和Safari最多 为4个)
很多WEB页面需要从一个主机名下载所有的组件。查看这些HTTP请求会发现它们是呈阶梯状的.
浏览器的并行下载进程数是可以修改的,如使用Firefox中的插件FastestFox,但我们不应该依赖用户来修改浏览器设置,这个可以简单的使用DNS别名,来将组件分别放到多个主机名中(新浪微博把这点发挥到极点–10个图片域名)。Yahoo的研究表明,使用两个主机名比使用1、4或10个主机名能。
脚本阻塞下载
并行下载组件的优点是很明显。但在下载脚本的时候并行下载实际上是被禁用——即使使用了不同的主机名,浏览器也不会启动其他的下载。其中一个原因是,脚本可能使用了document.write来修改页面内容,因此浏览器会等到,以确保页面能沟恰当地布局。
正确地放置
我们使用的脚本加载时间很可能比我们预期的时间长很多,因为用户的带宽也回影响脚本的响应时间。
而在我们开发过程中,很多情况我们很难讲脚本移到底部。比如刚才说得脚本使用了document.write向页面中插入了内容,就不能将其移动到页面中靠后的位置。
这里就出现了另外一种建议就是使用延迟脚本。defer属性表明脚本不包含document.write,浏览器得到这一线索就可继续进行呈现。但是如果一个脚本可以延迟,那么它就一定可以移到页面底部。而且延迟脚本只适用于IE对火狐不好使。所以底部最优。